<template>
    <div class="password-input">
      <input v-for="(item, index) in Array.from({ length: 6 })" :key="index"
        ref="inputs" v-model="passwords[index]" @input="onInput(index, $event)" 
        maxlength="1" type="password" />
    </div>
  </template>
   
  <script name="psdInput" setup>
  import {onMounted, watch, reactive } from 'vue';
  
  const emit = defineEmits(['input-complete']);
   
  let passwords = reactive(Array(6).fill(''));
   
  function onInput(index, event) {
    let input = event.target;
    if (!input.value) return;
    if (index < 5) {
      input.blur();
      setTimeout(() => {
        let nextIndex = index + 1;
        let nextInput = input.nextElementSibling;
        if (nextInput) nextInput.focus();
      }, 0);
    }
  }
   
  onMounted(() => {
    watch(passwords, (newVal) => {
      let password = newVal.join('');
      if (password.length === 6) {
        // 触发密码输入完成事件，传递密码值
        emit('input-complete', password);
      }
    });
  });
  </script>
   
  <style scoped>
  .password-input input {
    width: 24px;
    height: 24px;
    text-align: center;
    margin: 0 5px;
    background: #F6F7F9;
    border: 0.5px solid #eee;
    font-size: 12px;
    outline: none;
  }
  </style>